<style type="text/css">
.meterial_style_content .mix { display: none; }
.meterial_style_content { padding: 0 5px; line-height: 1.6; position: relative; word-wrap: break-word; word-break: break-all; }
.meterial_style_content li { cursor: pointer; padding: 10px 5px; border-bottom: 1px solid #ddd; display: none; -webkit-transition: background-color .5s ease; -o-transition: background-color .5s ease; transition: background-color .5s ease; }
.meterial_style_content li:hover { background-color: #f3f3f3; }
.meterial_style_content li:last-child { border-bottom: none; }
.meterial_style_content li img { max-width: 100%; height: auto; }
</style>
<ul id="meterial_style_content" class="meterial_style_content">
	<include file="./Application/Home/View/Common/editor_material/gzhArtStyle/content.html" />
</ul>
<script type="text/javascript">
$(function() {
	var editor = typeof current_editor != 'undefined' ? current_editor : undefined;

	;(function(ed) {

		$('#meterial_style_content').mixItUp({
			layout: {
				display: 'block'
			},
			load: {
				filter: '.material_attention'
			},
			selectors: {
				filter: '.js_material_container .js_mt_filter'
			},
			controls: {
				activeClass: 'selected'
			},
			callbacks: {
				onMixStart: function(e, state) {
					$('.bwstyle_container .style_detail_container').scrollTop(0);
					return true;
				}
			}
		}).on('click', '.style_item', function() {
			if (ed) {
				ed.execCommand('inserthtml', $(this).html());
			}
		});

		$('.js_material_container .js_mt_filter:first-child').addClass('selected');
	}(editor));
});
</script>